<template>
    <div>
        <h1>登录</h1>

        <van-form @submit="$store.dispatch('login',user)">
            <van-field
                left-icon="user-o"
                v-model.trim="user.name"
                clearable
                name="用户名"
                label=""
                placeholder="用户名"
                :rules="[
                { required: true, message: '请填写用户名' },
                {pattern:/^[a-zA-Z0-9_-]{4,16}$/,message:'4到16位用户名'}]"
            />
            <van-field
                left-icon="bag-o"
                v-model.trim="user.password"
                clearable
                type="password"
                name="密码"
                label=""
                placeholder="密码"
                :rules="[
                { required: true, message: '请填写密码' },
                {pattern:/.{6,18}/,message:'请输入6-18位密码'}]"
            />
            <div style="margin: 16px;">
                <van-button round block  color="linear-gradient(to right, #f70, #f30)" native-type="submit">登录</van-button>
            </div>
        </van-form>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                // 用户输入信息 用户名与密码
                user:{
                    name:"",
                    password:""
                }
            }
        }
    }
</script>